<template>
  <default-layout>
    <header-back text="系统设置" slot="header"></header-back>
    <div slot="main">
      <!--<div class="cell-list">
        <div class="item">
          <div class="left">
            <i class="xffont xf-tuisongrenwu"></i>
            <span class="text">推送消息</span>
          </div>
          <div class="right">
            <span class="text">{{value ? '开' : '关'}}</span>
            <mt-switch v-model="value"></mt-switch>
          </div>
        </div>
      </div>-->
      <div class="cell-list">
        <router-link to="/sys/password" class="item">
          <div class="left">
            <i class="xffont xf-mima"></i>
            <span class="text">修改密码</span>
          </div>
          <div class="right">
            <i class="xffont xf-youkuohao"></i>
          </div>
        </router-link>
        <router-link to="/sys/binding" class="item">
          <div class="left">
            <i class="xffont xf-bangding"></i>
            <span class="text">绑定管理</span>
          </div>
          <div class="right">
            <i class="xffont xf-youkuohao"></i>
          </div>
        </router-link>
        <!--<div class="item">
          <div class="left">
            <i class="xffont xf-gengxin"></i>
            <span class="text">版本更新</span>
          </div>
          <div class="right">
            <span class="text">1.0</span>
            <i class="xffont xf-youkuohao"></i>
          </div>
        </div>-->
        <div class="item" @click="clear">
          <div class="left">
            <i class="xffont xf-qinglihuancun"></i>
            <span class="text">清理缓存</span>
          </div>
          <div class="right">
            <span class="text">{{used}}</span>
            <i class="xffont xf-youkuohao"></i>
          </div>
        </div>
      </div>
      <div class="cell-list">
        <router-link to="/sys/about" class="item">
          <div class="left">
            <i class="xffont xf-guanyu"></i>
            <span class="text">关于我们</span>
          </div>
          <div class="right">
            <i class="xffont xf-youkuohao"></i>
          </div>
        </router-link>
        <!--<div class="item">
          <div class="left">
            <i class="xffont xf-qiehuanshenfen"></i>
            <span class="text">切换身份</span>
          </div>
          <div class="right">
            <span class="text">切换至单位</span>
            <i class="xffont xf-youkuohao"></i>
          </div>
        </div>-->
      </div>
      <mt-button type="danger" size="large" @click="logOut" class="logout">退出登录</mt-button>
    </div>
    <transition name="router" mode="out-in">
      <router-view class="fixed-router"></router-view>
    </transition>
  </default-layout>
</template>
<script>
  import HeaderBack from '../../../components/header-back/header-back.vue'
  import {mapMutations} from 'vuex'
  import {STORAGE_TYPE} from '../../../common/js/config'
  import DefaultLayout from '../../../layouts/default-layout/default-layout'
  import {eventEmitter} from '../../../common/js/util'

  export default {
    components: {DefaultLayout, HeaderBack},
    data() {
      return {
        value: false,
        used: ''
      }
    },
    methods: {
      ...mapMutations({
        setUserInfo: 'SET_USER_INFO'
      }),
      logOut() {
        this.$message.confirm('确定退出？').then(() => {
          this.setUserInfo(null)
          this.$router.replace({name: 'home'})
        })
      },
      clear() {
        this.$message.confirm('这将会清除系统缓存的表单、用户操作痕迹等，确定清除？').then(() => {
          const userInfo = localStorage.getItem(STORAGE_TYPE.userInfo)
          localStorage.clear()
          sessionStorage.clear()
          localStorage.setItem(STORAGE_TYPE.userInfo, userInfo)
          this.$message.alert('清理成功！').then(() => {
            this.getUsed()
            eventEmitter.emit('refreshToken')
          })
        })
      },
      getUsed() {
        const userInfo = localStorage.getItem(STORAGE_TYPE.userInfo)
        const str = JSON.stringify(localStorage) + JSON.stringify(sessionStorage)
        const bytesCount = getBytes(str) - getBytes(userInfo)
        if (bytesCount > 1024 * 1024) {
          this.used = (bytesCount / 1024 / 1024).toFixed(1) + ' mb'
        } else {
          this.used = (bytesCount / 1024).toFixed(1) + ' kb'
        }
      }
    },
    created() {
      this.getUsed()
    }
  }

  function getBytes(str) {
    let bytesCount = 0
    for (let i = 0; i < str.length; i++) {
      let c = str.charCodeAt(i)
      if ((c >= 0x0001 && c <= 0x007e) || (c <= 0xff60 && c <= 0xff9f)) {
        bytesCount += 1
      } else {
        bytesCount += 2
      }
    }
    return bytesCount
  }
</script>
<style lang="scss" scoped>
  @import "../../../common/style/variable";
  @import "../../../common/style/cellList";

  .cell-list {
    margin: 0 0 .15rem 0;
  }

  .logout {
    margin: .8rem 0 0 0;
  }
</style>
